<template>
  <view class="goods_detail" v-if="goodsDetail">
    <u-swiper
      :list="goodsDetail.pics"
      name="pics_big"
      height="500"
      img-mode="aspectFit"
      @click="handlePreviewImage"
    ></u-swiper>
    <view>¥{{ goodsDetail.goods_price }}</view>
    <view>{{ goodsDetail.goods_name }}</view>
    <u-parse :html="goodsDetail.goods_introduce"></u-parse>
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">联系客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator class="item car" open-type="switchTab" url="/pages/cart/cart">
          <u-badge
            class="car-num"
            :count="totalNums"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="handleAddCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  onLoad(options) {
    // 根据id获取商品详情
    this.getGoodsDetail(options.goods_id);
    //测试 store有没有生效
    console.log(this.$store);
  },
  data() {
    return {
      goodsDetail: null,
    };
  },
  computed:{
    ...mapGetters('cart',['totalNums'])
  },
  methods: {
    // ...mapMutations("模块的名称",["模块中的函数1","模块中的函数2",...]),
    ...mapMutations('cart',['addCart']),
    handleAddCart() {
        // console.log(this.totalNums);
        this.addCart(this.goodsDetail)
    },
    async getGoodsDetail(goods_id) {
      const result = await this.$u.get("goods/detail", { goods_id });
      console.log(result);
      this.goodsDetail = result.message;
    },
    // 点击轮播图 放大预览
    // index 被点击的图片的下标
    handlePreviewImage(index) {
      // 获取要轮播的图片的url 组成新的数组
      const urls = this.goodsDetail.pics.map((v) => v.pics_big);

      // 获取被点击的图片的url
      const current = urls[index];

      // 放大预览
      uni.previewImage({ urls, current });
    },
  },
};
</script>

<style lang="scss">
.goods_detail {
  padding-bottom: 52px;
}
.navigation {
  position: fixed;
  left: 0rpx;
  bottom: 0rpx;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>